<template>
  <div class="charts_container" >
    <div class="tit">{{chartsData.name}}</div>
    <div :id="`person_charts_${chartsData.id}`" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
export default {
  props: {
    chartsData: {
      type: Object,
      required: true
    },
  },
  watch: {
    chartsData(newv) {
      this._initCharts()
    }
  },
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      if(!this.chartsData) {
        return
      }
      
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(`person_charts_${this.chartsData.id}`))
      var xData = ['商铺数','业主数','租户数'];
      var y1Data = [];
      y1Data.push(this.chartsData.store)
      y1Data.push(this.chartsData.owner)
      y1Data.push(this.chartsData.tenement)
      
      // var y2Data = [45,85,65];
      const option = {
        // backgroundColor: '#000',
        grid: {
            left: '18%',
            right: '20%',
            top: '20%',
            bottom: '20%',
        },
        title: {
            show: false,
            left: 0,
            top: '0',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['数量', '占比'],
            right: '3%',
            top: '10%',
            itemWidth: 11,
            itemHeight: 11,
            textStyle: {
                color: '#ffffff',
                fontSize: this.$options.filters.fontSize(0.13)
            }
        },
        toolbox: {
            show: false,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                show: true,
                axisTick: {
                    show: false
                },
                width: this.$options.filters.fontSize(0.2),
                axisLabel: {
                    fontSize: this.$options.filters.fontSize(0.12),
                    color: '#d0d0d0',
                    margin: this.$options.filters.fontSize(0.08),
                    interval:0,
                    
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#4e608b',//左边线的颜色
                        width:''//坐标线的宽度
                    }
                },
                data: xData
            }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '数量(个)',
            nameTextStyle: {
                color: 'rgba(255,255,255,1)',
                fontSize: this.$options.filters.fontSize(0.12)
            },
            axisLine: {
                show: false
            },
            splitNumber : 3,
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: 'rgba(255,255,255, 0.1)'
                }
            },
            axisLabel: {
                fontSize: this.$options.filters.fontSize(0.12),
                color: '#d0d0d0',
                margin: this.$options.filters.fontSize(0.12),
            },
            // max: 500,
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          // {
          //   type: 'value',
          //   scale: true,
          //   axisLine: {
          //       show: false
          //   },
          //   splitNumber : 3,
          //   axisTick: {
          //       show: false
          //   },
          //   axisLabel: {
          //       fontSize: 13,
          //       color: '#d0d0d0',
          //       margin: 12,
          //       formatter: '{value}%'
          //   },
          //   splitLine: {
          //       lineStyle: {
          //           // 使用深浅的间隔色
          //           color: 'transparent'
          //       }
          //   },
          //   name: '占比(%)',
          //   nameTextStyle: {
          //       color: 'rgba(255,255,255,0.4)',
          //       fontSize: 12
          //   },
          //   max: 100,
          //   min: 0,
          //   boundaryGap: [0.2, 0.2],
          //   interval: 20,
              
          // },

        ],
        series: [
        {
          name:'数量(个)',
          type:'bar',
          color: '#C08754',
          label: {
              normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                      color: '#fff',
                      fontSize: this.$options.filters.fontSize(0.12)
                  }
              }
          },
          itemStyle: {
              normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: "#222" // 0% 处的颜色
                  }, {
                      offset: 1,
                      color: "#888" // 100% 处的颜色
                  }], false)
              }
          },
          barWidth: this.$options.filters.fontSize(0.2),
          yAxisIndex: 0,
          data: y1Data
        }
        // {
        //   name:'占比(%)',
        //   yAxisIndex: 1,
        //   color: '#C08754',
        //   symbol: 'circle',
        //   symbolSize: 6,
        //   label: {
        //       normal: {
        //           show: true,
        //           position: 'top',
        //           formatter: '',
        //           textStyle: {
        //               color: '#000'
        //           }
        //       }
        //   },
        //   itemStyle:{
        //       normal:{
        //           color:'#C08754', //折点颜色
        //           lineStyle: {
        //               color: '#C08754'
        //           },
        //       },
        //   },
        //   type:'line',
        //   data: y2Data
        // }
        ]}





      // 绘制图表
      myChart.setOption(option)

    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 291px;
  height: 305px;
  margin-right: 19px;
  position: relative;
  border: 1px solid rgba($color: #fff, $alpha: 0.11);
  padding-top: 24px;
  box-sizing: border-box;
  .tit {
    background: rgba($color: #fff, $alpha: 0.16);
    display: inline-block;
    padding: 10px;
    color:#fff;
    font-size: 14px;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>